import React, {Component} from 'react';
import hocStateExtract from "../hocPage/hoc/hocStateExtract";
import Modal from "../../components/Modal";

class WenZhang extends Component {
  state = {
    newsList: [
      {
        "id": 1,
        "title": "我和左卓是真的吗",
        "content": "[\"ztjy/f4a667ed35b2d04db3b8c0d69c9f9387.1591599649857\",\"ztjy/215380553a21676106c4da4ee3bc4603.1591599649857\"]",
        "typeid": 3,
        "publish": 1,
        "able": 1,
        "published_at": "2020-06-08T16:05:22.000Z",
        "top_at": null,
        "top": null,
        "createdAt": "2020-06-08T07:00:50.000Z",
        "updatedAt": "2020-06-08T08:05:22.000Z"
      },
      {
        "id": 2,
        "title": "蔡徐坤是暖男吗",
        "content": "[\"ztjy/4b012ebbd5213cbe3bf1131250284d54.1591599771359\",\"ztjy/f57a6531b7ffa015d6a0a93e4d4487b1.1591599771359\"]",
        "typeid": 3,
        "publish": 0,
        "able": 1,
        "published_at": null,
        "top_at": null,
        "top": null,
        "createdAt": "2020-06-08T07:02:52.000Z",
        "updatedAt": "2020-06-08T07:02:52.000Z"
      },
      {
        "id": 3,
        "title": "梁山是108个将领吗",
        "content": "[\"ztjy/1f5fc69add2492eb00b00a2aacc60158.1591599819937\",\"ztjy/83c7f62ba0675c5da1cd9cf76fe60a7b.1591599819937\"]",
        "typeid": 1,
        "publish": 0,
        "able": 1,
        "published_at": null,
        "top_at": null,
        "top": null,
        "createdAt": "2020-06-08T07:03:40.000Z",
        "updatedAt": "2020-06-08T07:03:40.000Z"
      },
      {
        "id": 4,
        "title": "明天就出道了 好紧张",
        "content": "[\"ztjy/7c4a9c2ec3f7379e156b598790210d89.1591600050309\",\"ztjy/78c123c7673e1eba5f705590b374b96d.1591600050309\"]",
        "typeid": 3,
        "publish": 0,
        "able": 1,
        "published_at": null,
        "top_at": null,
        "top": null,
        "createdAt": "2020-06-08T07:07:30.000Z",
        "updatedAt": "2020-06-08T07:07:30.000Z"
      }, {
        "id": 5,
        "title": "武松打虎",
        "content": "[\"ztjy/614595e49969129fee540dedb9e0c1d9.1591611140297\",\"ztjy/fd92a4cb96f2562282fcc6e9ddf881de.1591611140297\"]",
        "typeid": 1,
        "publish": 0,
        "able": 1,
        "published_at": null,
        "top_at": null,
        "top": null,
        "createdAt": "2020-06-08T10:12:21.000Z",
        "updatedAt": "2020-06-08T10:12:21.000Z"
      }],
    isShow: false
  };

  render() {
    let {newsList, isShow} = this.state;
    return (
      <div>
        <h1>文章组件被高阶组件包裹 抽离state: {this.props.time}</h1>
        <table>
          {
            newsList.map(item => {
              return <tr key={item.id}>
                <td>{item.id}</td>
                <td>{item.title}</td>
                <td>
                  <button onClick={() => {

                    if (!localStorage.getItem('token')) {
                      setTimeout(() => {
                        this.props.history.push('/detail/' + item.id);
                      }, 2000);
                      this.setState({isShow: true});
                    } else {
                      this.props.history.push('/detail/' + item.id);
                    }
                  }
                  }>预览
                  </button>
                </td>
              </tr>
            })
          }
        </table>

        <Modal toast={true} show={isShow} cancel={() => {
          this.setState({
            isShow: false
          })
        }}>
          <h4>请登录</h4>
        </Modal>
      </div>
    );
  }
}

WenZhang = hocStateExtract(WenZhang);
export default WenZhang;
